import {  PieChartOutlined,DeliveredProcedureOutlined,UnorderedListOutlined,BorderInnerOutlined,DeleteColumnOutlined  } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import { useState } from 'react';
import {useNavigate} from 'react-router-dom'
const { Sider } = Layout;
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const items = [
  getItem('首页', '/home/index', <PieChartOutlined />),
  getItem('访客记录', 'visitor', <UnorderedListOutlined />, [
    getItem('访客列表', '/visitor/visitorlist'),
    getItem('访客添加修改', '4'),
    getItem('负责人操作导入详细', '5'),
  ]),
  getItem('部门管理', 'sub2', <BorderInnerOutlined />, [
    getItem('部门列表', '8'), 
    getItem('部门添加修改 ', '9')
  ]),
  getItem('管理员', 'sub3', <DeliveredProcedureOutlined />, [
    getItem('管理员列表', '10'), 
    getItem(' 管理员添加修改 ', '11')
  ]),
  getItem('核销人员管理', 'sub4', <DeleteColumnOutlined />, [
    getItem('核销人员列表', '12'), 
    getItem(' 核销人员添加修改  ', '14'),
    getItem(' 核销人员日志  ', '15')
  ]),
  getItem('审核日志', 'sub5', <DeleteColumnOutlined />, [
    getItem('审核列表', '16'), 
  ]),
  getItem('校园动态', 'sub6', <DeleteColumnOutlined />, [
    getItem('校园动态列表', '17'), 
    getItem('校园动态添加修改', '18'),
  ]),
  getItem('系统设置', '19', <PieChartOutlined />),
];
const Leftmenu = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate()
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div
        // 左侧菜单头部样式
          // style={{
          //   height: 32,
          //   margin: 16,
          //   background: 'rgba(255, 255, 255, 0.2)',
          // }}
        />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onSelect={(item)=>{
          console.log(item);
          navigate(item.keyPath[0])
        }}/>
      </Sider>
    </Layout>
  );
};
export default Leftmenu;